<template>
 <div class="yMaxBox">
   <van-search
       shape="round"
       v-model="value"
       show-action
       placeholder="请输入搜索关键词"
       @click="setClick"
   >
     <template #action>
       <van-icon name="scan"  @click="setinpt" />
       <input style="display: none" type="file" id='image' accept="image/*" capture='camera'>
     </template>
   </van-search>

<!-- 轮播图  -->
   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
     <van-swipe-item v-for="(item,index) in list" @click="getdetal(item)"><img :src="item.image_src" alt=""></van-swipe-item>
   </van-swipe>
<!-- 导航栏  -->
   <van-grid :column-num="NavList.length">
     <van-grid-item v-for="(item,index) in NavList" :key="index">
       <img :src="item.image_src" @click="setclass"  >
     </van-grid-item>
   </van-grid>
<!--  楼层  -->
   <div class="MaxBox">
       <div v-for="(item,index) in floorList" :key="index">
         <!--  标题   -->
         <div class="title">
           <img :src="item.floor_title['image_src']" alt="">
         </div>
<!--            内容     -->
         <div class="MinBox">
           <div class="left" v-for="ite in item.product_list">
             <img  v-lazy="ite.image_src" @click="setlist(ite.navigator_url)">
           </div>
         </div>
       </div>
   </div>
 </div>
</template>
<script>
import request from "../api/request";
export default {
  name: 'Home',
  data(){
    return{
      value:'',
      list:[],//轮播图
      NavList:[],//导航栏数据
      floorList:[],//楼层数据
      ferList:[],
      flag:false,
    }
  },
  created() {
    //节流，加载第一次将数据存起来，后面不在发请求获取数据
    let list=JSON.parse(localStorage.getItem('list'))
    let NavList=JSON.parse(localStorage.getItem('NavList'))
    let floorList=JSON.parse(localStorage.getItem('floorList'))
    if(list!==null&&NavList!==null&&floorList!==null){
        this.list=list
        this.NavList=NavList;
        this.floorList=floorList;
        this.floorList.forEach((v,i) =>{
        this.ferList.push(v.product_list[0])
        })
    }else {
      this.getData()
    }
  },
  methods:{
    //点击跳转列表页
    setlist(str){
      this.$router.push({
        path:'/ShopList',
        query:{
          Str:str.split('?')[1]
        }
      })
    },
    //点击跳转分类
    setclass(){
      this.$router.push('/class')
    },
    //调用相机
    setinpt(){
      document.getElementById('image').click()
    },
    getdetal(obj){
      this.$router.push({
        path:`/details/${obj.goods_id}`,
      })
    },
    //跳转搜素页
    setClick(){
      this.$router.push('/search')
    },
    getData(){
        //轮播图
        request.get('home/swiperdata').then(res=>{
          let {message}=res.data;
          this.list=message
          localStorage.setItem('list',JSON.stringify(message))
        })
        // 导航数据
        request.get('home/catitems').then(res=>{
          let {message}=res.data;
          this.NavList=message;
          localStorage.setItem('NavList',JSON.stringify(message))
        })
        //"navigator_url":"/pages/goods_list?query=登山包"
        // 楼层数据
        request.get('home/floordata').then(res=>{
          console.log(res.data)
          let {message}=res.data;
          this.floorList=message
          this.floorList.forEach((v,i) =>{
            this.ferList.push(v.product_list[0])
          })
          localStorage.setItem('floorList',JSON.stringify(message))
        })
      }
  }
}
</script>
<style scoped lang="less">
.van-search{position: sticky;top:0;z-index: 999}
.yMaxBox{padding-bottom:50px}
div{box-sizing: border-box}
.my-swipe .van-swipe-item {
  img{width: 100%;vertical-align: center}
}
.MinBox{overflow: hidden}
.van-grid-item img{width:100%}
.title{width:100%;}
.title img{width: 100%;margin-top:10px}
.left{float: left;width: 33.33%;
   &:nth-last-child(-n+4){
    height: 33.33vw *386 /232 /2;
     padding: 2px;
   }
  img{width: 100%;height: 100%;}}
</style>
